<template>
  <div class="edit-page-wrap edit-page-wrap-1">
    <Head title="站点信息">
      <template #content>
        <el-form
          ref="ruleFormRef"
          :model="ruleForm"
          :rules="rules"
          label-width="130px"
          class="edit-form-wrap"
        >
          <el-form-item label="充电站省备案号" prop="recordUniqueNo">
            <el-input
              v-model.trim="ruleForm.recordUniqueNo"
              placeholder="请输入充电站省备案号"
              maxlength="30"
              clearable
            />
          </el-form-item>
          <el-form-item label="是否安装监控" prop="videoMonitor">
            <el-radio-group
              v-model="ruleForm.videoMonitor"
              v-for="(item, index) in optionsS.videoMonitorData"
              :key="index"
              @change="changeVideoMonitor"
            >
              <el-radio :label="item.value">{{ item.label }}</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="停车费类型" prop="parkType">
            <qc-select
              :value="ruleForm.parkType"
              :options="optionsS.parkTypeData"
              placeholder="请选择停车费类型"
              @change="handleParkType"
            >
            </qc-select>
          </el-form-item>
        </el-form>
      </template>
    </Head>
    <Head title="配电信息">
      <template #content>
        <el-form
          ref="ruleFormRef1"
          :model="ruleForm"
          :rules="rules"
          label-width="130px"
          class="edit-form-wrap"
        >
          <el-form-item label="供电类型" prop="supplyType">
            <el-radio-group
              v-model="ruleForm.supplyType"
              v-for="(item, index) in optionsS.supplyTypeData"
              :key="index"
              @change="changeSupplyType"
            >
              <el-radio :label="item.value">{{ item.label }}</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item
            label="供电局用户编号"
            prop="residentNo"
            v-if="ruleForm.supplyType == '1'"
          >
            <el-input
              v-model.trim="ruleForm.residentNo"
              placeholder="请输入供电局用户编号"
              maxlength="30"
              clearable
            />
          </el-form-item>
          <el-form-item label="电表号" prop="wattHourMeterNo">
            <el-input
              v-model.trim="ruleForm.wattHourMeterNo"
              placeholder="请输入电表号"
              maxlength="30"
              clearable
            />
          </el-form-item>
          <el-form-item label="场站额定总功率" prop="ratedPower">
            <el-input
              v-model.trim="ruleForm.ratedPower"
              placeholder="请输入场站额定总功率"
              maxlength="9"
              clearable
            >
              <template #append>kW</template>
            </el-input>
          </el-form-item>
          <el-form-item label="电费类型" prop="electricityType">
            <qc-select
              :value="ruleForm.electricityType"
              :options="optionsS.electricityTypeData"
              placeholder="请选择电费类型"
              @change="handleChangeElectricityType"
            >
            </qc-select>
          </el-form-item>
          <el-form-item label="是否独立报装" prop="businessExpandType">
            <el-radio-group
              v-model="ruleForm.businessExpandType"
              v-for="(item, index) in optionsS.businessExpandTypeData"
              :key="index"
              @change="changeExpandType"
            >
              <el-radio :label="item.value">{{ item.label }}</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item
            label="报装电源容量"
            prop="capacity"
            v-if="ruleForm.businessExpandType == 1"
          >
            <el-input
              v-model.trim="ruleForm.capacity"
              placeholder="请输入独立报装的电源容量"
              maxlength="9"
              clearable
            >
              <template #append>KV-A</template>
            </el-input>
          </el-form-item>
        </el-form>
      </template>
    </Head>
    <div class="edit-btn-wrap">
      <el-button type="primary" plain @click="back">取消</el-button>
      <el-button type="primary" v-btnAntiShake="onSubmit">保存</el-button>
    </div>
  </div>
</template>
  
  <script lang="ts" setup>
import { ElMessage, FormInstance, FormRules } from 'element-plus';
import Head from '@/components/head/index.vue';
import {
  saveOrUpdateStationProvinceRegulator,
  queryStationProvinceRegulator,
  querySameStationProvinceRegulator,
} from '@/service/apis/pile';
import { queryDicByParent } from '@/service/apis/api';
import { IS_NUM } from '@/utils/verify';

const router = useRouter();
const route = useRoute();
const {
  query: { id },
} = route;
const ruleFormRef = ref<FormInstance>();
const ruleFormRef1 = ref<FormInstance>();

const optionsS = reactive({
  videoMonitorData: [] as any,
  supplyTypeData: [] as any,
  parkTypeData: [] as any,
  electricityTypeData: [] as any,
  businessExpandTypeData: [] as any,
});

let ruleForm: any = reactive({
  stationId: id,
  recordUniqueNo: '',
  videoMonitor: '',
  parkType: undefined as unknown,
  supplyType: '',
  residentNo: '',
  wattHourMeterNo: '',
  ratedPower: '',
  electricityType: undefined as unknown,
  businessExpandType: '',
  capacity: '',
  id: '',
});

const checkCode = (rule: any, value: any, callback: any) => {
  querySameStationProvinceRegulator({
    recordUniqueNo: ruleForm.recordUniqueNo,
    id: ruleForm.id,
  }).then((res: any) => {
    console.log(res);
    if (res == '0') {
      callback(new Error('充电站省备案号不能重复'));
    } else {
      callback();
    }
  });
};

const rules = reactive<FormRules>({
  recordUniqueNo: [
    { required: false, message: '请输入充电站省备案号', trigger: 'blur' },
    { validator: checkCode, trigger: ['blur'] },
  ],
  videoMonitor: [
    { required: false, message: '请选择是否安装监控', trigger: 'change' },
  ],
  parkType: [
    { required: false, message: '请选择停车费类型', trigger: 'change' },
  ],
  supplyType: [
    { required: false, message: '请选择供电类型', trigger: 'change' },
  ],
  residentNo: [
    { required: false, message: '请输入供电局用户编号', trigger: 'blur' },
  ],
  wattHourMeterNo: [
    { required: false, message: '请输入电表号', trigger: 'blur' },
  ],
  ratedPower: [
    { required: false, message: '请输入场站额定总功率', trigger: 'blur' },
    {
      pattern: IS_NUM,
      message: '请输入数字',
      trigger: 'blur',
    },
  ],
  electricityType: [
    { required: false, message: '请选择电费类型', trigger: 'change' },
  ],
  businessExpandType: [
    { required: false, message: '请选择是否独立报装', trigger: 'change' },
  ],
  capacity: [
    { required: false, message: '请输入独立报装的电源容量', trigger: 'blur' },
    {
      pattern: IS_NUM,
      message: '请输入数字',
      trigger: 'blur',
    },
  ],
});

const back = () => {
  router.go(-1);
};

queryDicByParent({
  listDtos: [
    'videoMonitor',
    'supplyType',
    'parkType',
    'electricityType',
    'businessExpandType',
  ],
}).then((res: any) => {
  optionsS.videoMonitorData = res.videoMonitor;
  optionsS.supplyTypeData = res.supplyType;
  optionsS.parkTypeData = res.parkType;
  optionsS.electricityTypeData = res.electricityType;
  optionsS.businessExpandTypeData = res.businessExpandType;
});

const handleParkType = async (e: any) => {
  ruleForm.parkType = e || null;
  console.log(e);
  console.log(ruleForm.parkType);
};

const changeVideoMonitor = async (e: any) => {
  ruleForm.videoMonitor = e;
};

const changeSupplyType = (e: any) => {
  ruleForm.supplyType = e;
};

const changeExpandType = async (e: any) => {
  ruleForm.businessExpandType = e;
};

const handleChangeElectricityType = async (e: any) => {
  ruleForm.electricityType = e;
};

// 详情赋值
if (id) {
  queryStationProvinceRegulator({ stationId: id }).then((res: any) => {
    console.log(res);

    if (res) {
      for (const key in ruleForm) {
        if (res[key]) {
          ruleForm[key] = res[key];
        }
      }
      ruleForm.electricityType =
        res.electricityType == 0
          ? String(res.electricityType)
          : res.electricityType
          ? String(res.electricityType)
          : null;
      ruleForm.parkType =
        res.parkType == 0
          ? String(res.parkType)
          : res.parkType
          ? String(res.parkType)
          : null;
      ruleForm.supplyType = String(res.supplyType) || '';
      ruleForm.videoMonitor = String(res.videoMonitor) || '';
      ruleForm.businessExpandType = String(res.businessExpandType) || '';
    }
  });
}
// 提交
const emit = defineEmits(['clear-cache']);
const onSubmit = async () => {
  if (!ruleFormRef.value || !ruleFormRef1.value) return;
  try {
    await Promise.all([
      ruleFormRef.value.validate(),
      ruleFormRef1.value.validate(),
    ]);
  } catch (fields: any) {
    for (const key in ruleForm) {
      if (fields[key]) {
        ruleFormRef.value.scrollToField(key);
        ruleFormRef1.value.scrollToField(key);
        break;
      }
    }
    return;
  }
  console.log(ruleForm);

  saveOrUpdateStationProvinceRegulator(ruleForm).then((res: any) => {
    emit('clear-cache');
    back();
  });
};
</script>
<style lang="scss">
.edit-page-wrap-1 {
  .edit-form-wrap {
    .el-input-number {
      .el-input {
        .el-input__wrapper {
          width: 0 !important;
        }
      }
    }
  }
}
.money-title {
  font-size: 12px;
  width: 97px;
  text-align: right;
  margin-right: 12px;
}
.sure-tips {
  color: var(--el-color-primary);
  margin-left: 12px;
}
</style>
